//条目的垂直布局，用于商品简要信息展示，用在 新品推荐 和 热销爆款 上

import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'

import { Title, Price } from '../../widget/Text'
import { screen, system } from '../../common'

type Props = {
    onPress: Function,
    info: Object,
}

class HomeMenuItem extends PureComponent<Props> {
    render() {
        return (
            <TouchableOpacity style={styles.container}
                onPress={this.props.onPress}>
                <Image source={{ uri: this.props.info.imageUrl }} resizeMode='contain' style={styles.image} />
                <Title>
                    {this.props.info.title}
                </Title>
                <Price>
                    {this.props.info.buyNum}人已买   赚{this.props.info.earn}
                </Price>
                <Title>会员价: ¥{this.props.info.price}</Title>
            </TouchableOpacity>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        padding: 5,
        width: screen.width / 3.2,
        height: screen.width / 2,
        backgroundColor: 'white'
    },
    image: {
        width: screen.width / 7,
        height: screen.width / 7,
        padding: 10
    }
});

export default HomeMenuItem;
